﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GoogleQR.aspx.cs" Inherits="WebApplication.GoogleQR" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .text
        {
            width: 200px;
            padding: 5px;
        }
        .button
        {
            padding: 5px;
        }
        select
        {
            padding: 5px;
        }
    </style>
    <script src="Scripts/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            for (var i = 1; i <= 500; i++) {
                $("#selectWidth").append("<option>" + i + "</option>");
            }
            $("#selectWidth").val("200");
            for (var i = 1; i <= 500; i++) {
                $("#selectHeight").append("<option>" + i + "</option>");
            }
            $("#selectHeight").val("200");
        })
        function update_qrcode() {
            var content = $("#content").val();
            var width = $("#selectWidth").val();
            var height = $("#selectHeight").val();
            $("#googleQR").html("<img src=\"https://chart.googleapis.com/chart?cht=qr&chs=" + width + "x" + height + "&choe=UTF-8&chld=L|4&chl=" + content + "\" />");
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input id="content" type="text" class="text" value="请输入内容" /><br />
        宽：
        <select id="selectWidth">
        </select>
        高：
        <select id="selectHeight">
        </select>
        <input type="button" value="生成" class="button" onclick="update_qrcode()" />
        <div id="googleQR">
            <img src="https://chart.googleapis.com/chart?cht=qr&chs=200x200&choe=UTF-8&chld=L|4&chl=请输入内容" />
        </div>
    </div>
    </form>
</body>
</html>
